<template>
  <div class="login">
        
    <div class="mui-content">
            
      <form class="mui-input-group">
                
        <div class="mui-input-row">
            <label>账号</label>            
          <input
            v-model="regForm.username"
            type="text"
            class="mui-input-clear mui-input"
            placeholder="请输入账号"
          />
                  
        </div>
                
        <div class="mui-input-row">
            <label>密码</label> 
          <input
            v-model="regForm.password"
            type="password"
            class="mui-input-clear mui-input"
            placeholder="请输入密码"
          />  
        </div>
              
        <div class="mui-input-row">
            <label>确认</label> 
          <input
            v-model="regForm.repassword"
            type="password"
            class="mui-input-clear mui-input"
            placeholder="请输入确认密码"
          />  
        </div>
        <div class="mui-input-row">
            <label>邮箱</label> 
          <input
            v-model="regForm.email"
            type="text  "
            class="mui-input-clear mui-input"
            placeholder="请输入邮箱"
          />  
        </div>
      </form>
            
      <div class="mui-content-padded">
                <button
          @click="reg"
          type="button"
          class="mui-btn mui-btn-block mui-btn-primary"
        >
          注册
        </button>
                
        <div class="link-area">
          <p>注册成功的用户可用于登录</p>
        </div>
              
      </div>
          
    </div>
      
  </div>
</template>
<script>
export default {
  data() {
    return {
      regForm: {
        username: "",
        password: "",
        repassword: "",
        email: "",
      },
    };
  },
  methods: {
    reg() {
      //判断用户是否已经输入了账号,秘密,重复密码,邮箱
      if (this.regForm.username === "") {
        this.$toast("账号不能为空");
        return;
      }
      if (this.regForm.password === "") {
        this.$toast("密码不能为空");
        return;
      }
      if (this.regForm.repassword === "") {
        console.log(this.regForm.repassword);
        this.$toast("确认密码不能为空");
        return;
      }
      if (this.regForm.email === "") {
        this.$toast("邮箱不能为空");
        return;
      }

      //2.判断用户两次输入的密码是否一致
      if (this.regForm.password != this.regForm.repassword) {
        this.$toast("两次密码输入必须相同");
        return;
      }
      console.log("验证成功");
      // 发送请求 后台接口 完成注册操作
      this.$http
        .post("register", this.regForm)
        .then((res) => {
          if (res.data.code === 1) {
            this.$toast(res.data.msg);
          } else {
            //注册成功 立即登录
            // 3.1 将用户的注册信息保存到 vuex
            this.$store.commit("user/setUser", res.data.data);
            // 3.2 将注册的用户的session_id保存localStorage
            this.$auth.setAuthorization(res.data.data.session_id);
            // 3.3弹窗提示 用户成功
            this.$toast(res.data.msg);
            // 3.4 完成注册之后跳转到我的页面(/user)
            this.$router.push("/user");
          }
        })
        .catch(() => {
          this.$toast("注册失败");
        });
    },
  },
};
</script>
<style scoped >
.mui-input-group {
  margin-top: 10px;
  background-color: transparent;
}
.mui-input-group label {
  width: 22%;
}
.mui-input-row:last-child {
  background: #fff;
}
.mui-input-row {
  margin-top: 20px;
  background: #fff;
}
.mui-input-row label ~ input,
.mui-input-row label ~ select,
.mui-input-row label ~ textarea {
  width: 78%;
}
.link-area {
  display: block;
  margin-top: 25px;
  text-align: center;
}
.mui-content-padded {
  margin-top: 30px;
}
</style>